<template>
    <div> 
        <el-form :inline="true" :model="searchForm"  class="forTbFilter">
            <el-form-item label="所属代理商：">
                <el-select v-model="searchForm.agentId" filterable placeholder="请选择或输入关键字" clearable>
                    <el-option v-for="item in agentsOption" :value="item.id" :key="item.id" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="运营商名称："> 
                <el-select v-model="searchForm.supplierId" clearable>
                    <el-option v-for="item in supplierOption" :value="item.id" :key="item.id" :label="item.supplierName"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="池子使用率："> 
                <el-input v-model.trim="searchForm.chaoData" placeholder="请输入流量池的使用百分比，如80" clearable></el-input>
            </el-form-item>
                <el-form-item label="流量池名称："> 
                <el-input v-model.trim="searchForm.poolName" clearable></el-input>
            </el-form-item>
             <el-form-item label="流量池类型："> 
                <el-select v-model="searchForm.type" clearable>
                    <el-option value="0" label="运营商流量池"></el-option>
                    <el-option value="1" label="自运营流量池"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="btnArea">
                 <el-button type="primary"  @click="getFluxPoolMgtListHandler">搜索查询</el-button>
                <el-button type="primary"  @click="showAddFluxPool">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tbpg.tableData" border>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="poolName" label="流量池名称"></el-table-column>
            <el-table-column prop="agentName" label="所属代理商"></el-table-column>
            <el-table-column prop="supplierName" label="运营商"></el-table-column>
            <el-table-column prop="groupId" label="CT流量池ID"></el-table-column>            
            <el-table-column prop="totalFlow" label="总流量(M)" width="100"></el-table-column>
            <el-table-column prop="useFlow" label="使用流量(M)" width="100"></el-table-column>
            <el-table-column prop="remainsFlow" label="剩余流量(M)" width="100"></el-table-column>
            <el-table-column prop="simActivation" label="激活张数" width="100"></el-table-column>
            <el-table-column prop="typeName" label="池子类型"></el-table-column>
            <el-table-column prop="simData" label="单卡流量"></el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEditFluxPool(scope.row)">编 辑</el-button>
                </template>
            </el-table-column>
        </el-table>  
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tbpg.currentPage"
            :page-sizes="[15, 50, 100, 500]"
            :page-size="tbpg.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbpg.total">
        </el-pagination>
        <el-dialog :title="title" :visible.sync="poolVisibale" width="600px" @close="cancel" :close-on-click-modal="false">
            <el-form ref="poolForm" :model="poolForm" :rules="poolRules" label-width="120px">
                <el-form-item label="流量池名称：" prop="poolName">
                    <el-input v-model="poolForm.poolName"></el-input>
                </el-form-item>
                <el-form-item label="代理商：" prop="agentId">
                    <el-select v-model="poolForm.agentId" filterable>
                        <el-option v-for="item in agentsOption" :value="item.id" :key="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商：" prop="supplierId">
                    <el-select v-model="poolForm.supplierId" clearable>
                        <el-option v-for="item in supplierOption" :value="item.id" :key="item.id" :label="item.supplierName"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="池子类型：" prop="type">
                    <el-select v-model="poolForm.type" filterable>
                        <el-option v-for="item in typesOption" :value="item.id" :key="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="CT流量池ID：" prop="groupId">
                    <el-input v-model="poolForm.groupId" placeholder="CT卡必填"></el-input>
                </el-form-item>
                 <el-form-item label="单卡流量/M：" prop="simData">
                    <el-input v-model="poolForm.simData" placeholder="自运营必填"></el-input>
                </el-form-item>

                  <el-form-item label="使用率告警：" prop="warnData">
                    <el-input v-model="poolForm.warnData" placeholder="填写使用率告警 （选填）"></el-input>
                </el-form-item>
                  <el-form-item label="告警手机号1：" prop="warnPhoneOne">
                    <el-input v-model="poolForm.warnPhoneOne" placeholder="告警手机号1 （选填）"></el-input>
                </el-form-item>
                  <el-form-item label="告警手机号2：" prop="warnPhoneTwo">
                    <el-input v-model="poolForm.warnPhoneTwo" placeholder="告警手机号2 （选填）"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sureAddOrEditFluxPool">确 定</el-button>
            </div>
        </el-dialog>     
    </div>
</template>

<script>
import {getFluxPoolMgtList, addFluxPool, editFluxPool} from '@/api/fluxPool.js'
import common from '@/utils/common.js'
export default {
    data(){         
        return {
            searchForm: {
                agentId:'',
                poolName:'',
                type:'',
                supplierId:'',
                chaoData:''
            },
            tbpg: {
                tableData: [],
                currentPage: 1,
                pageSize: 15,
                total: 0
            },  
            supplierOption:[],
            poolVisibale: false,
            title: '新增流量池',
            optFlag: '',
            poolForm: {
                currentId: null,
                poolName: '',
                agentId: '',
                supplierId: '',
                groupId:'',
                simData:'',
                type:'',
                warnData:'',
                warnPhoneOne:'',
                warnPhoneTwo:''
            },
            typesOption:[

                {
                    id:'0',
                    name:'运营商流量池'
                },
                {
                    id:'1',
                    name:'自运营流量池'
                }
            ],
            supplierOption: [],
            agentsOption: [],
            poolRules: {
                poolName: [{required: true, message: '请输入流量池名称', trigger: 'blur'}],
                agentId: [{required: true, message: '请选择代理商', trigger: 'blur change'}],
                supplierId: [{required: true, message: '请选择供应商', trigger: 'blur change'}],
                groupId: [{required: false, message: 'CT卡必填', trigger: 'blur'}],
            }
        }
    },
    methods: {
        cancel(){
            this.poolVisibale = false;
            this.$refs.poolForm.resetFields();
        },
        getFluxPoolMgtListHandler($event){
            common.resetCurrentPage(this, $event, 'tbpg');
            var data = common.getRequestParams(this, 'tbpg', this.searchForm);            
            getFluxPoolMgtList(data).then(res => {
                common.listCallback(this, res, 'tbpg');
            })
        },
        showAddFluxPool(){
            this.poolVisibale = true;
            this.title = '新增流量池';
            this.optFlag = 'add';
            common.getSupplierOptsCom(this, 'supplierOption')
            common.getNextAgentOptsCom(this, 'agentsOption');  
        },
        showEditFluxPool(row){
            this.poolVisibale = true;
            this.title = '编辑增流量池';
            this.optFlag = 'edit';
            common.getSupplierOptsCom(this, 'supplierOption')
            common.getNextAgentOptsCom(this, 'agentsOption');
            this.poolForm = JSON.parse(JSON.stringify(row));
        },
        sureAddOrEditFluxPool(){
            this.$refs.poolForm.validate(valid => {
                if(valid){
                    var data = this.poolForm
                    if(this.optFlag == 'add'){
                        addFluxPool(data).then(res => callback(res))
                    }else{
                        editFluxPool(data).then(res => callback(res))
                    }
                }
                var _this = this;
                function callback(res){
                    if(res.data.code == 200){
                        _this.getFluxPoolMgtListHandler();
                        _this.poolVisibale = false;
                        
                    }else{
                        _this.$message.error(res.data.message)
                    }                     
                }
            })
        },
        handleSizeChange(val){
            this.tbpg.pageSize = val;
            this.getFluxPoolMgtListHandler();
        },
        handleCurrentChange(val){
            this.tbpg.currentPage = val;
            this.getFluxPoolMgtListHandler();
        }       
    },
    created () {
         common.getSupplierOptsCom(this, 'supplierOption');
        common.getNextAgentOptsCom(this, 'agentsOption');
        this.getFluxPoolMgtListHandler();
    }
}
</script>

<style lang="scss" scoped>

</style>

